<template>
  <div class="layout flex-box flex-column">
    <Header></Header>
    <router-view v-if="isDisplayPage" class="display-page"> </router-view>
    <div class="main flex-box flex1" v-else>
      <Slider v-if="showSide"></Slider>
      <router-view class="flex1 router-view-warp" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  .main {
    height: 0;
    margin-top: 48px;
  }
  .display-page {
    margin-top: 48px;
  }
}
</style>
<script setup lang="ts">
import Header from "./Header.vue";
import Slider from "./Slider.vue";
import { useLayout } from "@/hooks/layout/useLayout";
const { showSide, isDisplayPage } = useLayout();
</script>
